import React from "react";
import styles from '@/assets/css/order_info.module.css';
import type business from '@/typeof/type';

const Info = () =>
{
    const [ searchParams ] = useSearchParams();
    const [ orderid ] = useState<string>(searchParams.get('orderid') ?? '');
    const [ OrderDetail, SetOrderDetail ] = React.useState<any>({room: {}});
    const [ GuestList, SetGuestList ] = React.useState([]);
    const [ business ] = useState<business>(React.business);

    React.useEffect(() => 
    {
        getOrderInfoData();
    }, [orderid])

    const getOrderInfoData = async() =>
    {
        let result = await React.Http.post('/order/info', {
            orderid: orderid,
            busid: business.id,
        })

        if(result.code == 1) 
        {
            SetOrderDetail(result.data.order);
            SetGuestList(result.data.guest)
        }
    }


    // 是否显示评价信息
    const CommentView = () =>
    {
        if(OrderDetail.rate > 0)
        {
            return(
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>评价信息：</div>
                    <div className={styles.comment}>
                        <React.UI.Rate value={OrderDetail.rate} readOnly />

                        <React.UI.Divider
                            style={{
                                color: '#1677ff',
                                borderColor: '#1677ff',
                                borderStyle: 'dashed',
                            }}
                        ></React.UI.Divider>

                        <React.UI.TextArea className='textarea' placeholder="请输入评论内容" defaultValue={OrderDetail.content} readOnly />
                    </div>
                </div>
            )
        } 
        else 
        {
            return (<></>)
        }
    }

    return (
        <>
            <div className={styles.order_info}>
                <div className={styles.info_content}>
                    <div className={styles.content_title}>订单信息：</div>
                    <div className={styles.content_item}>
                        <p>入住时间</p>
                        <div>{OrderDetail.starttime_text} {OrderDetail.startday_text} - {OrderDetail.endtime_text}  {OrderDetail.endday_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住天数</p>
                        <div>共 {OrderDetail.order_day} 晚</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单价格</p>
                        <div className={styles.content_price}>￥{OrderDetail.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>房间单价</p>
                        <div className={styles.content_price}>￥{OrderDetail.room.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>支付方式</p>
                        <div>{OrderDetail.type_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住人数</p>
                        <div>{GuestList.length} 人</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单备注</p>
                        <div>{OrderDetail.remark}</div>
                    </div>
                </div>
                {/* 房间信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>房屋信息：</div>
                    <div className={styles.detail}>
                        <div className={styles.thumb}>
                            <NavLink to={`/room/info?roomid=${OrderDetail.roomid}`}>
                                <img src={OrderDetail.room.thumb_text} alt="" />
                            </NavLink>
                        </div>
                        <div className={styles.right}>
                            <p>{OrderDetail.room.name}</p>
                            <div className={styles.tips}>
                                {OrderDetail.room.flag_text && OrderDetail.room.flag_text.map((flag: any, index: any) => <React.UI.Tag key={index} color='primary'>{flag}</React.UI.Tag>)}
                            </div>
                        </div>
                    </div>
                </div>

                {/* 入住信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>住客信息：</div>
                    <div className={styles.detail}>
                        <React.UI.List className={styles.list}>
                            {GuestList.map((item: any) => (
                                <React.UI.List.Item
                                    key={item.nickname}
                                    description={`手机号码：${item.mobile}`}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            ))}
                        </React.UI.List>
                    </div>
                </div>

                {/* 评价信息 */} 
                <CommentView/>
            </div>
        </>
    )
}

export default Info;